import React from 'react';

import {Table, Button, Icon, Input,} from 'antd';
import './SimpleTalbe1.less'
import SimpleDropdown from "./SimpleDropdown";

const dropdownMenu1 = {
  key: 'dropdownMenu1',
  items: [{key: 'all', titile: "全部"},
    {key: 'part', titile: "部分"},
    {key: 'select', titile: "选定"},]
}

const dropdownMenu2 = {
  key: 'dropdownMenu2',
  items: [{key: 'name', titile: "按名称"},
    {key: 'time', titile: "按时间"},]
}

const dropdownMenu3 = {
  key: 'dropdownMenu3',
  items: [{key: 'order', titile: "序号正序"},
    {key: 'disorder', titile: "序号反序"},]
}

const dropdownMenu4 = {
  key: 'dropdownMenu4',
  items: [{key: '15', titile: "15"},
    {key: '25', titile: "25"},
    {key: '35', titile: "35"},]
}

export default class SimpleTable1 extends React.Component {

  static defaultProps = {
    title: '待办事项',
    data: [{
      key: '1',
      name: 'John Brown',
      money: '￥300,000.00',
      address: 'New York No. 1 Lake Park',
    }, {
      key: '2',
      name: 'Jim Green',
      money: '￥1,256,000.00',
      address: 'London No. 1 Lake Park',
    }, {
      key: '3',
      name: 'Joe Black',
      money: '￥120,000.00',
      address: 'Sidney No. 1 Lake Park',
    }],

    columns: [{
      title: 'Name',
      dataIndex: 'name',
    }, {
      title: 'Cash Assets',
      dataIndex: 'money',
    }, {
      title: 'Address',
      dataIndex: 'address',
    }, {
      title: 'Action',
      className: ' action-container',

      key: 'action',
      render: (text, record) => <div>
        <span className="action-text">办理</span>
        <div className="action-cut-line"/>
        <span className="action-text">延时提醒</span>
      </div>
    }],
  }

  state = {
    title: this.props.title,
    columns: this.props.columns,
    data: this.props.data,
    value1: '',//待办事项
    value2: '',//查询内容
    dropdownSelected1: dropdownMenu1.items[0],
    dropdownSelected2: dropdownMenu2.items[0],
    dropdownSelected3: dropdownMenu3.items[0],
    dropdownSelected4: dropdownMenu4.items[0],
  }

  onChange1 = (e) => {
    const {value} = e.target;
    this.setState({
      value1: value,
    })
  }

  onChange2 = (e) => {
    const {value} = e.target;
    this.setState({
      value2: value,
    })
  }

  /**
   * 点击查询
   */
  onSearch = () => {
    this.props.onSearch && this.props.onSearch();
  }

  render() {
    const {columns, data} = this.state
    return (
      <div className="flex-box table-container">
        <div className="flex-box table-header">
          <div className="flex-box table-header-right">
            <div className="right-line"/>
            <span>{this.state.title}</span>
          </div>

          <div className=" flex-center flex-box table-header-left">
            <Button size="small">
              <Icon type="sync"/>刷新
            </Button>
            <Button size="small">
              <Icon type="question-circle-o"/>帮助
            </Button>
          </div>

        </div>

        <div className="flex-box table-content">
          <div className={"flex-box table-title"}>
            <div className="flex-box table-title-top">
              <span className="table-title-top-text1">待办事项</span>
              <Input
                onChange={this.onChange1}
                onPressEnter={() => {
                  this.input2 && this.input2.focus();
                }}
                placeholder="请输入仓库名称"/>
              <span className="table-title-top-text1">本部操作</span>

              <SimpleDropdown
                classNameStyle="table-title-top-dropdown"
                dropdownMenu={dropdownMenu1}
                onFinishSelect={(select) => {
                  this.setState({dropdownSelected1: select})
                }}
              />
            </div>
            <div className="flex-box table-title-bottom">
              <SimpleDropdown
                classNameStyle="table-title-bottom-dropdown"
                dropdownMenu={dropdownMenu2}
                onFinishSelect={(select) => {
                  this.setState({dropdownSelected2: select})
                }}
              />
              <Input
                ref={(ref) => this.input2 = ref}
                value={this.state.value2}
                onChange={this.onChange2}
                onPressEnter={() => {

                }}/>
              <Button className="table-title-bottom-with-color" size="small">查询</Button>
              <Button size="small" onClick={() => this.setState({
                value2: ''
              })}>清空</Button>

            </div>
            <div className="table-title-operate flex-box">
              <div>
                <Button className="table-title-operate-with-color" size="small">添加</Button>
                <Button className="table-title-operate-with-border" size="small">批量启用</Button>
                <Button className="table-title-operate-with-border" size="small">批量停用</Button>
              </div>
              <div>
                <span>排序</span>
                <SimpleDropdown
                  classNameStyle="table-title-operate-with-custom1"
                  dropdownMenu={dropdownMenu3}
                  onFinishSelect={(select) => {
                    this.setState({dropdownSelected3: select})
                  }}
                />
                <span>显示</span>
                <SimpleDropdown
                  classNameStyle="table-title-operate-with-custom2"
                  dropdownMenu={dropdownMenu4}
                  onFinishSelect={(select) => {
                    this.setState({dropdownSelected4: select})
                  }}
                />
                <span>条</span>
              </div>
            </div>
          </div>
          <Table
            columns={columns}
            dataSource={data}
            bordered
          />

        </div>

      </div>
    )
  }
}
